<template>
  <div class="attr">
    <!-- -->
    <search @getValue="getSonValue"></search>
    <div class="main">
      <!-- <div class="search">
        <span >政策分类查询：</span>
        <el-select-v2 v-model="value" :options="options" placeholder="Please select" size="large"
          style="width: 130px" />
        <el-select-v2 class="u-m-l-20" v-model="value" :options="options" placeholder="Please select" size="large"
          style="width: 130px" />
        <el-button class="u-m-l-20" size="large" type="primary" :icon="Search"></el-button>
      </div> -->

      <div class="content">
        <div class="content-title">
          <p class="flex-2">文件标题</p>
          <!-- <p class="flex-1">发号文字</p>
          <p class="flex-1">发文机关</p>
          <p class="flex-1">主题分类</p> -->
          <p class="flex-1">发布日期</p>
        </div>
        <div
          class="contentitem pointer"
          @click="tofiledetail(index, i)"
          v-for="(i, index) in advicelist"
          :key="index"
        >
          <div class="u-m-tb-20 contentbox">
            <p class="flex-2">{{ i.title }}</p>
            <!-- <p class="flex-1">{{ i.text }}</p>
            <p class="flex-1">{{ i.jiguan }}</p>
            <p class="flex-1">{{ i.type }}</p> -->
            <p class="flex-1">{{ i.adviceTime }}</p>
          </div>
          <el-divider border-style="dashed" />
        </div>
      </div>
      <div class="pagniation">
        <el-pagination background layout="prev, pager, next" :total="10" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import search from "../acl/search.vue";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";

import { getadvice } from "@/api/user/index";


//获取新闻动态
const advicelist = ref([
{
    title:
      "",
    content: "",
    adviceTime: "2024-04-12",
  },
]);
const getadvicelist = async () => {
  const res = await getadvice(1, 10);
  advicelist.value = res.data.records;
};
getadvicelist();

const value = ref("");
const mylist = reactive([
  {
    title:
      "河南省人力资源和社会保障厅关于加强和改进职称评审工作进一步激发专业技术人员活力的通知",
    text: "豫人社办 〔2024〕27号",
    jiguan: "河南省人力资源和社会保障厅",
    type: "职称管理",
    time: "2024-04-12",
  },
  {
    title:
      "河南省“人人持证、技能河南”建设工作领导小组办公室关于印发《2024年“人人持证、技能河南”稳规模优结构增实效建设工作方案》的通知",
    text: "豫人社办 〔2024〕4号",
    jiguan: "河南省人力资源和社会保障厅",
    type: "职业能力建设",
    time: "2024-03-15",
  },
  {
    title:
      "河南省人力资源和社会保障厅 河南省财政厅关于发布河南省2024年政府补贴性职业技能培训项目指导目录的通知",
    text: "豫人社办 〔2024〕39号",
    jiguan: "河南省人力资源和社会保障厅",
    type: "职业建设",
    time: "2024-03-05",
  },
  {
    title:
      "河南省“人人持证、技能河南”建设工作领导小组办公室关于公布2024年河南省第一批承担政府补贴性职业技能培训和评价机构目录清单的通知",
    text: "豫人社办 〔2024〕3号",
    jiguan: "河南省人力资源和社会保障厅",
    type: "职业建设",
    time: "2024-03-05",
  },
]);
const initials = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
const options = Array.from({ length: 1000 }).map((_, idx) => ({
  value: `Option ${idx + 1}`,
  label: `${initials[idx % 10]}${idx}`,
}));
const getSonValue = (e) => {
  console.log(e); //子组件传入的值
};
const $router = useRouter();

const tofiledetail = (index, i) => {
  $router.push({
    path: "./filedetaile",
    query: {
      id: index,
      title: i.title,
      content: i.content
    },
  });
};
</script>
<style lang="scss" scoped>
@mixin flex {
  display: flex;
  align-items: center;
}
.attr {
  .main {
    width: 1400px;
    margin: -92px auto 60px;
    position: relative;
    width: 1280px;
    height: 100%;
    background: #fff;
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08);
    padding: 50px 30px;
    .search {
      @include flex();
      font-size: 14px;
      span {
        flex-shrink: 0;
      }
    }
    .content {
      width: 100%;

      .content-title {
        font-size: 16px;
        width: 100%;
        @include flex();
        justify-content: space-between;

        p {
          background-color: rgb(236, 236, 236);
          text-align: center;
          margin-right: 20px;
          padding: 10px;
        }
      }

      .contentbox {
        width: 100%;
        @include flex();
        justify-content: space-between;
        &:hover {
          color: dodgerblue;
        }
        p {
          font-size: 14px;
          box-sizing: border-box;
          padding: 0 10px;
          margin-right: 20px;
          text-align: center;
        }
      }
    }
  }
}
</style>
